#{set 'board'}true#{/set}
#{extends 'overlay.html' /}

#{ifnot tasks}
<div id="NOTE"style="padding: 10px 10px 10px 10px" class="ui-state-highlight ui-corner-all"> 
	<span style="float: left; margin-right: 0.3em;" class="ui-icon ui-icon-info"></span>
	<strong>NOTE: </strong>There isn't enough data to display the task board</div>
#{/ifnot}

#{else}
<style type="text/css">
	.drag{position: relative;}
	.shadowed {
  -moz-box-shadow: 2px 2px 3px #969696;
  -webkit-box-shadow: 2px 2px 3px #969696;
  padding:10px;
}

.sideHolder {
	position: fixed;
	right: 0px;
	top: 0px;
	height: 100%;
	margin: auto 0px;
	color: white !important;
	margin: auto 0px;
}
</style>

#{set 'moreScripts'}
<script  type="text/javascript" src="@{'/public/javascripts/tzcount.js/'}" ></script>
<script  type="text/javascript" src="@{'/public/javascripts/dragtable.js/'}" ></script>
<script  type="text/javascript" src="@{'/public/javascripts/jeditable.js/'}"  ></script>
<script  type="text/javascript" src="@{'/public/javascripts/drag.js/'}"  ></script>
#{/set}
#{set 'onLoad'}
REDIPS.drag.init();
#{/set}
#{if comp==null}
#{set compID=0}
#{/set}
#{/if}
#{else}
#{set compID=comp.id}
#{/set}
#{/else}
#{if comp==null}
<h1>${p.name}'s Task Board</h1>
#{/if}
#{else}
	#{if comp.number==0}
	<h1>${p.name}'s Task Board</h1>
	#{/if}
	#{else}
	<h1>${comp.name}'s Task Board</h1>
	#{/else}
#{/else}

<div class="sideHolder">
	<div class="notch"style="top: 190px;">
	
	#{if comp==null}
	<a href="#" title="View meetings?"onclick="make('sideMeet',this);$('#sideMeet').load('/Boards/loadMeetings?pid=${p.id}&sid=${s.id}')">
	<img src="/public/images/meetings.png" alt="[Meeting]"/>
	</a>
	#{/if}
	#{else}
	<a href="#" title="View meetings?"onclick="make('sideMeet',this);$('#sideMeet').load('/Boards/loadMeetings?pid=${p.id}&sid=${s.id}&cid=${comp.id}')">
	<img src="/public/images/meetings.png" alt="[Meeting]"/>
	</a>
	#{/else}

	</div>
	<div id="sideMeet" class="siderC">
		<div style="display:table;width:100%;height:100%;">
<div id="overlayLoading" style="text-align:center;vertical-align:middle;display:table-cell">
<img src="/public/images/loading.gif" alt="Loading"/></div>
	</div>
</div></div>
<div class="notchTop"></div>
<div class="proj allCornersRounded" style="margin-bottom:10px;padding:10px; text-align:center">
#{set count=0}
#{/set}


<a href="#;" onclick="$('#changeCol').slideToggle()" title="view hidden columns" type="button" ><img src="@{'/public/images/famfam/application_view_columns.png'}"/>View hidden columns</a> |


<!-- view hidden Col by Hadeer -->
#{if connected.in(p).can('ShowColumn')}
#{if hidencolumnsOfBoard.isEmpty()}
 <a class="dim" title="all columns are added" href="#"type="button"><img src="@{'/public/images/famfam/add.png'}"/></a> Show columns |
#{/if}
#{else}
 <a href="#;" onclick="$('#b1').slideToggle()" title="add column?" type="button"><img src="@{'/public/images/famfam/add.png'}"/>Show columns</a> |
#{/else}
#{/if}

#{if connected.in(p).can('HideColumn')}
#{if columnsOfBoard.isEmpty()}
 <a class="dim" title="all columns deleted" type="button"><img src="@{'/public/images/famfam/delete.png'}"/></a> Hide columns |
#{/if}
#{else}
 <a href="#;" onclick="$('#b2').slideToggle()" title="delete column?" type="button" ><img src="@{'/public/images/famfam/delete.png'}"/>Hide columns</a> |
#{/else}
#{/if}



<select id="changeCol" onchange="showCol(changeCol.value)" style="display:none;margin-left:50%"  >
<option id="d" value="d">Columns</option>
#{list items:columnsOfBoard, as:'c'}
<option value= "${count}" onclick="showCol(${count})">${c.name}</option>
#{set count=count+1}
#{/set}
#{/list}	
</select>


#{if comp==null}
<select id="b1" onchange="javascript: showHiddenCol(b1.value, ${s.id},0);" style="display:none;margin-left:50%" class="hidecol">
<option value="">Columns</option>
#{list items:hidencolumnsOfBoard, as:'c'}
<option onclick="showHiddenCol(${c.id}, ${s.id},0)" value= "${c.id}">${c.name}</option>
#{/list}
#{/if}
#{else}
<select id="b1" onchange="javascript: showHiddenCol(b1.value, ${s.id},${comp.id});" style="display:none;margin-left:50%" class="hidecol">
<option value="">Columns</option>
#{list items:hidencolumnsOfBoard, as:'c'}
<option onclick="showHiddenCol(${c.id}, ${s.id},${comp.id})" value= "${c.id}">${c.name}</option>
#{/list}
#{/else}
</select><!-- hide Col by Hadeer -->

#{if comp==null}
<select id="b2"  style="display:none;margin-left:50%" onchange="hideCol(b2.value, ${s.id},0)" class="showcol">
<option id="x" value="">Columns</option>
#{list items:columnsOfBoard, as:'c'}
<option onclick="hideCol(${c.id}, ${s.id},0)" value="${c.id}">${c.name}</option>
#{/list}
#{/if}
#{else}
<select id="b2" onchange="hideCol(b2.value, ${s.id},${comp.id})" style="display:none;margin-left:50%" class="showcol">
<option id="x" value="">Columns</option>
#{list items:columnsOfBoard, as:'c'}
<option onclick="hideCol(${c.id}, ${s.id},${comp.id})" value="${c.id}">${c.name}</option>
#{/list}
#{/else}
</select>


</div>
<div id="drag">
<table id="mainBoard" class="draggable" border="1">

<tr> <!-- headers row -->					
	<td width="50px">Headers</td>
	
	<!-- set flag based on logged in user -->
	#{set count=0}
	#{/set}
	#{list items:columnsOfBoard, as:'col'}	
	<td width="50px" style="text-align:center;" class="col_${count}"> 	
		#{if connected.in(p).can('renameColumns')}<!-- if admin -->
		<div style="font-size:small;display:inline-block;width:3cm" class="${col.name} editCOL ccolumn" id="${col.id}" title="Edit the column name?">${col.name}</div>
		#{/if}
		#{else} <!-- if not admin -->
		<div style="font-size:small; display:inline-block;" class="${col.name} ">${col.name}</div>
		#{/else}	
		<div style="text-align:center">
		<a id="${col.sequence}_c" onclick = "swapCol(id)" style="color:#FFFFFF">
		<span style="list:none;padding:1px 1px 1px 1px;display:inline-block" title="Swap with another column?" class="ui-state-default ui-corner-all">
		<span style="display:inline-block !important"><img src="@{'/public/images/famfam/swap.png'}"></span>
		</span></a>
		<a><span style="list:none;padding:1px 1px 1px 1px;display:inline-block" title="Drag the column Anywhere" >
		<span style="display:inline-block" class="ui-icon ui-icon-arrow-4 "></span>
		</span></a>
		<a style="color:#FFFFFF"><span style="list:none;padding:1px 1px 1px 1px;display:inline-block" class="ui-state-default ui-corner-all ">
		<span onclick="myhidecol(id)" title="hide column?" id="${count}" style="display:inline-block !important"><img src="@{'/public/images/famfam/toggle-open.gif'}"></span>
		</span></a>
		#{set count=count+1}
		#{/set}
		</div>
	</td>
	#{/list}
</tr>

#{list items:data, as:'component'}  
#{if component!=null} 
<tr id="com-${component.id}_hidden" style="display:none;" > <!-- empty rows of the board -->
	<td width="50px">Click here to toggle</td>
	#{set count=0}
	#{/set}
	#{list items:columnsOfBoard, as:'col'}
	<td width="50px" class="col_${count}"></td> <!-- creating empty cells in each row based on number default columns (onBoard=true) -->
	#{set count=count+1}
	#{/set}
	#{/list}
</tr>


<tr id="com-${component.id}" style="height:100px"> <!-- filling rows with data -->
	<td width="50px" id="com-${component.id}" onclick="component(this.id);">${component.title}</td> <!-- 1st cell in each row with component name -->
	#{set count=0}
	#{/set}
	#{list items:component, as:'col'}
	<td width="50px" class="col_${count}" id="${columnsOfBoard[count].taskStatus.id}_${component.id}_${compID}">  <!--filling cells in each row with tasks -->
		#{set count=count+1}#{/set}
		#{list items:col, as:'task'}
		
		#{if task.assignee != null}#{set assignee = task.assignee.id}#{/set}#{set assigneeName = task.assignee.name}#{/set}#{/if}
		#{else}#{set assignee = 0}#{/set}#{set assigneeName = 'None'}#{/set}#{/else}
		
		#{if task.reviewer != null}#{set reviewer = task.reviewer.id}#{/set}#{set reviewerName = task.reviewer.name}#{/set}#{/if}
		#{else}#{set reviewer = 0}#{/set}#{set reviewerName = 'None'}#{/set}#{/else}
		
		#{if task.taskType != null}#{set taskType = task.taskType.name}#{/set}#{/if}
		#{else}#{set taskType = 'None'}#{/set}#{/else}
		
		<!-- small sticky note -->
		#{if connected.in(p).can('changeTaskStatus') || connected.equals(task.assignee) || connected.equals(task.reviewer)}
		<div style="float:left" id="task-${task.id}_T_${compID}" class="drag status_${assignee} status_${reviewer}">
		#{/if}
		#{else}
		<div style="float:left" id="task-${task.id}_T_${compID}" class="nostatus status_${assignee} status_${reviewer}">
		#{/else}
		<a id="task-${task.id}_hidden" style="display:none; font-size:large;cursor: pointer !important;text-decoration:none" onclick="showtask(this.id);"><img title="hide?" src="@{'/public/images/famfam/bullet_toggle_plus.png'}"></img></a>
		<div id="task-${task.id}_TT">
		<p>		
		<div class="${task.taskStatus.columns[0].name}"></div> 
		#{if task.taskType!=null}<div class="small_${task.id} shadowed" style="-moz-border-radius:10px; border-radius:10px; background-color:${task.taskType.hexColor}; border:0px; "  id="${task.id}_small">#{/if}
		#{else}<div class="small_${task.id} shadowed" style="-moz-border-radius:10px; border-radius:10px; background-color:white; border:0px; "  id="${task.id}_small">#{/else}
		<a id="task-${task.id}" onclick="ctask(this.id);" style="cursor:pointer !important;border=0px; float:right;"><img title="hide?" src="@{'/public/images/famfam/bullet_toggle_minus.png'}"></img></a> 
		<div id="desc_${task.id}">${task.description}</div>
		<a onclick="SmallSticky(this.id)" title="Edit task info?"  style="cursor: pointer !important" id="${task.id}_button">more info..</a>
		</div>
		</p>
		
		
		<!-- big sticky note -->						
		<div class="large_${task.id}" id="${task.id}Large" style="display:none;border:hidden">
		<div id="tas-${task.id}_" >
		<p style="float:left"> 
		#{if task.taskType!=null}
		<div class="shadowed" style="-moz-border-radius:15px; background-color:${task.taskType.hexColor};border-radius:15px; border:0px" id="tas-${task.id}_T">
		#{/if}#{else}<div class="shadowed" style="-moz-border-radius:15px; background-color:white; border:0px" id="tas-${task.id}_T">
		#{/else}
		<div  style="border=0px" align="center"></div>
		
		#{if connected.in(p).can('changeTaskDescreption') || connected.equals(task.assignee)} <!-- if has permission (desc) or assignee -->
		
		<div style="width:3cm" id="${task.id}_des" border=0px class="editDES editdesc_${assignee} tiptipize" title="Edit description?">${task.description}</div>	
		<div style="display:none" class="noedit noedit_${assignee}"id="${task.id}_desc" border=0px >${task.description}</div>	
		#{/if}
		#{else} <!-- if doesn't have have permission (desc) nor assignee -->
		<div class="noedit noedit_${assignee}"id="${task.id}_des" border=0px >${task.description}</div>
		<div style="display:none;width:3cm" id="${task.id}_desc" border=0px class="editDES editdesc_${assignee} tiptipize" title="Edit description?">${task.description}</div>		
		#{/else}
		
		#{if comp==null}
		#{if connected.in(p).can('changeAssignee')} <!-- if has permission (edit assignee) -->
		<div><a title="Change Assignee?" value="dddd" class="hidesassi" id="usr_${task.id}" href="javascript:popUp('/Tasks/choose_assignee?task_id=${task.id}&component_id=${component.id}&user_id='+selectedUser)">
		Assignee:${assigneeName}</a></div>
		<div id="usrs_${task.id}" class="showdesc" style="display:none">Assignee:${task.assignee}</div>	
		#{/if}
		#{else} <!-- if doesn't have permission (edit assignee) -->
		<div><a title="Change Assignee?" style="display:none" class="hidesassi" id="usr_${task.id}" HREF="javascript:popUp('/Tasks/choose_assignee?task_id=${task.id}&component_id=${component.id}&user_id='+selectedUser)">
		Assignee:${assigneeName}</a></div>
		<div id="usrs_${task.id}" class="showdesc">Assignee:${task.assignee}</div>
		#{/else}
		#{/if}
		
		#{if connected.in(p).can('changeReviewer')} <!-- if has permission (edit reviewer) -->
		#{if comp==null}
		<div><a id="rev_${task.id}" title="Change Reviewer?" class="hidesrev"  HREF="javascript:popUp('/Tasks/choose_reviewer?task_id=${task.id}&component_id=${component.id}&user_id='+selectedUser)">
		Reviewer:${reviewerName}</a></div>
		#{/if}
		#{else}
		<div><a id="rev_${task.id}" title="Change Reviewer?" class="hidesrev"  HREF="javascript:popUp('/Tasks/choose_reviewer?task_id=${task.id}&component_id=${comp.id}&user_id='+selectedUser)">
		Reviewer:${reviewerName}</a></div>
		#{/else}
		<div id="revs_${task.id}" class="showrev" style="display:none">Reviewer:${task.reviewer}</div>
		#{/if}
		#{else} <!-- if doesn't have permission (edit reviewer) -->
		#{if comp==null}
		<div><a id="rev_${task.id}" title="Change Reviewer?" style="display:none" id="rev_${task.id}" class="hidesrev"  HREF="javascript:popUp('/Tasks/choose_reviewer?task_id=${task.id}&component_id=${component.id}&user_id='+selectedUser)">
		Reviewer:${reviewerName}</a></div>
		#{/if}
		#{else}
		<div><a id="rev_${task.id}" title="Change Reviewer?" style="display:none" id="rev_${task.id}" class="hidesrev"  HREF="javascript:popUp('/Tasks/choose_reviewer?task_id=${task.id}&component_id=${comp.id}&user_id='+selectedUser)">
		Reviewer:${reviewerName}</a></div>
		#{/else}
		<div id="revs_${task.id}" class="showrev">Reviewer:${task.reviewer}</div>
		#{/else}
		
		#{if connected.in(p).can('changeTaskType') || connected.equals(task.assignee)} <!-- if has permission (type) or assignee -->
		<div><a id="type_${task.id}" title="Edit type?" class="hidestype shows_${assignee}" HREF="javascript:popUp('/Tasks/choose_type?task_id=${task.id}&user_id='+selectedUser)">
		Type:${taskType}</a></div>
		<div id="types_${task.id}" style="display:none" class="shwtype shwtype_${assignee}" id="${task.id}_type">Type:${taskType}</div>
		#{/if}
		#{else} <!-- if doesn't have have permission (type) nor assignee -->
		<div><a title="Edit type?" style="display:none" id="type_${task.id}" class="hidestype shows_${assignee}" HREF="javascript:popUp('/Tasks/choose_type?task_id=${task.id}&user_id='+selectedUser)">
		Type:${taskType}</a></div>
		<div id="types_${task.id}" class="shwtype shwtype_${task.assignee.id}" id="${task.id}_type">Type:${taskType}</div>
		#{/else}
		<a href="#" id="${task.id}-done" title="Done Editing?" onclick="done(this.id)">Done</a>
		</div>
		</p>	
		</div>
		</div>
		</div>
		</div>
		#{/list}
	</td>
	#{/list}
</tr>
#{/if}
#{/list}
</table>
</div>
#{/else}
<script type="text/javascript">
var selectedUser = 0;
var col_from = -1;
var col_to = -1;


function showCol(c)
{
	//$('#desc_1').load('/boards/loadboard1?sprintID=1 #desc_1');
	$('.col_'+c).css('display','table-cell');	
	var seloption = document.getElementById('changeCol');
	seloption.selectedIndex='d';
}
function showHiddenCol(colid, sid, compid)
{
	$.post('/Boards/showHiddenColumn' ,{cid:colid,uid:${connected.id},sid:sid,compid:compid}, function(){window.location.reload();});		
}
function hideCol(colid,sid,compid)
{
	var answer=confirm('Are you sure u want to delete this coulmn?')
	if (answer) 	
	{
		$.post('/Boards/hideColumn' ,			
		{cid:colid,uid:${connected.id},sid:sid,compid:compid}, function(){
		window.location.reload();
		});
	}
	else
	{
	  	var seloption = document.getElementById('b2');
		seloption.selectedIndex='x';
	}
}
function popUp(URL) 
{
	day = new Date();
	id = day.getTime();
		eval("page" + id + " = window.open(URL, '" + id + "', 'toolbar=0,scrollbars=1,location=0,statusbar=0,menubar=0,resizable=1,width=270,height=270,left = 0,top = 0');");
}

function popUpmeeting(URL) 
{
	day = new Date();
	id = day.getTime();
	eval("page" + id + " = window.open(URL, '" + id + "', 'toolbar=0,scrollbars=1,location=0,statusbar=0,menubar=0,resizable=1,width=980,height=150,left = 135,top = 30');");
}


function SmallSticky(did)
	{
		var split = did.split("_");
		var id=split[0];	
		$('#'+id+"_small").hide();
		$('#'+id+"Large").show();
	}

function done(did)
	{		
	var split 	= did.split("-");
	var id=split[0];
		$('#'+id+"_small").show();
		$('#'+id+"Large").hide();
	}

function ctask(id)
{
	var split 	= id.split("-");
	sid=split[1];
	$('#'+id+"_TT").hide();	
	$('#'+id+"_hidden").show();
}
	
	function showtask(id)
	{
		var splittedT 	= id.split("_");
		var j= splittedT[0];
		originalT = '#'+j+"_TT";
		$(originalT).show();
		$('#'+id).hide();
	}
	
	function component(id)
	{
		$('#'+id).toggle();
		original = '#'+id;
		$('#'+id+"_hidden").toggle();
		$('#'+id+'_hidden').click(function(){
		var splittedC 	= id.split("_");
		var i= splittedC[0];
		originalC = '#'+i;
		$(originalC).show();
		$(this).hide();
	});
	}
		
	function ToggleBoardClose()
	{
		$('#mainBoard').slideToggle(400)
		$('#ToggleBoard-open').css('display','inline-block');
		$('#ToggleBoard-close').css('display','none');	
 	}
 	
	function ToggleBoardOpen ()
	{
		$('#mainBoard').slideToggle(400)
		$('#ToggleBoard-open').css('display','none');
		$('#ToggleBoard-close').css('display','inline-block');
 	}
	
	function myhidecol(id)
	{
		var i =id;
		$('.col_'+i).css('display','none');
	}
	
	$('.editDES').live('mouseover',function(){$(this).editable(function(value)
		{
		var taskId 	= parseInt($('#lolid').closest("div").attr("id"));  
    	 $.post('@{Tasks.edit_task_description()}',{id:taskId, user_id:selectedUser, description:value});
		 document.getElementById("desc_"+taskId).innerHTML = value;
       	 document.getElementById(taskId+"_des").innerHTML = value;
         document.getElementById(taskId+"_desc").innerHTML = value;
		 return(value);   
    	},{indicator : 'Saving...',});});

	$('.editCOL').live('mouseover',function(){$(this).editable(function(value)
    	   {var colId 	= parseInt($('#lolid').closest("div").attr("id"));   
    	    $.post('@{Columns.editColumnName}',{id:colId, name:value, userId:selectedUser});
		    return(value);
    	   },{indicator : 'Saving...',});});
	$('.drag').live('mouseover', function(){
	REDIPS.drag.init();})
	/**
	 * swapping with clicking instead of drag and drop.
	 * 
	 * @author: 
	 *	 		Joseph Hajj
	 * 
	 */
 function swapCol(TheID)
	{
		var data = TheID.split("_");
		var id = data[0];
		var temp;
		var table = document.getElementById("mainBoard");
		if(col_from==-1)
		{
			
			col_from=id;
			col_from++;
			var rowCount = table.rows.length;
			for(var i=1; i<rowCount; i++)
			{
			table.rows[i].cells[col_from].style.backgroundColor = '#CCFFFF';
			}
			col_from--;
			
		}
		else if (col_from==id)
		{
			
			var rowCount = table.rows.length;
			col_from++;
			for(var i=1; i<rowCount; i++)
			{
			table.rows[i].cells[col_from].style.backgroundColor = '#FFFFFF';
			}
			col_from=-1;
		}
		else if (col_to==-1)
		{
			col_to=id;
			col_from++;
			col_to++;

			var rowCount = table.rows.length;
			for(var i=1; i<rowCount; i++)
			{
			table.rows[i].cells[col_from].style.backgroundColor = '#FFFFFF';
			}
			
			for(var i=0; i<rowCount; i++)
			{
				temp = table.rows[i].cells[col_from].innerHTML;
				table.rows[i].cells[col_from].innerHTML = table.rows[i].cells[col_to].innerHTML;
				table.rows[i].cells[col_to].innerHTML = temp ;
			}
			col_to--;
			col_from--;

			$.post('/Columns/changeColumnPosition2' ,			
					{id:gup('sprintID'),pos1:col_from, pos2:col_to,user_id : selectedUser,cid:gup('componentID')},
					function()
					{
						location.reload();
						});
			col_from = col_from + "_c";
			col_to = col_to + "_c";
			var col1 = document.getElementById(col_from);
			var col2 = document.getElementById(col_to);
			if(col_to>col_from)
			{
				col1.id=col_to;
				col2.id=col_from;
			}
			else
			{
				col2.id=col_from;
				col1.id=col_to;
			}
			
			
			col_from=-1;
			col_to=-1;
			
		}
		else
		{	
			col_from=id;
			col_to=-1;
		}
	}
	/**
	 * swapping with settings instead of drag and drop.
	 * 
	 * @author: 
	 *	 		Joseph Hajj
	 * 
	 */
		function swapValues() {
		var table = document.getElementById("mainBoard");
		var from = document.getElementById("from").value;
		var to = document.getElementById("to").value;
		var rowCount = table.rows.length;
		for(var i=0; i<rowCount; i++)
		{
			temp = table.rows[i].cells[from].innerHTML;
			table.rows[i].cells[from].innerHTML = table.rows[i].cells[to].innerHTML;
			table.rows[i].cells[to].innerHTML = temp ;
		}
		}
		function make(el,me)
       {
    	   var $marginLefty = $('#'+el);
    	   $marginLefty.animate({
        	   marginRight: parseInt($marginLefty.css('marginRight'),10) == 0 ?$marginLefty.outerWidth() :0
           });
           var $ana = $(me).parent();
           $ana.animate({
        	   right: parseInt($ana.css('right'),10) == 0 ? -21 : 0
           },
           function(){
        	   $(me).parent().toggleClass('notch2');
           });

           
       }
 
		
</script>
